<!DOCTYPE html>
<!-- Ported from the OpenGL Samples Pack: https://github.com/g-truc/ogl-samples/blob/master/tests/gl-320-buffer-uniform.cpp -->
<html lang="en">

<head>

    <title>WebGL 2 Samples - buffer_uniform</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="info">WebGL 2 Samples - buffer_uniform</div>

    <script id="vs" type="x-shader/x-vertex">
        #version 300 es
        precision highp float;
        precision highp int;
        
        layout(std140, column_major) uniform;
     
        struct Transform
        {
            mat4 P;
            mat4 MV;
            mat4 Mnormal;
        };

        uniform PerDraw
        {
            Transform transform;
        } u_perDraw;

        layout(location = 0) in vec3 position;
        layout(location = 1) in vec3 normal;
        layout(location = 2) in vec4 color;
 
        out vec3 v_normal;
        out vec3 v_view;
        out vec4 v_color;

        void main()
        {
            vec4 pEC = u_perDraw.transform.MV * vec4(position, 1.0);

            v_normal = (u_perDraw.transform.Mnormal * vec4(normal, 0.0)).xyz;
            v_view = -pEC.xyz;
            v_color = color;

            gl_Position = u_perDraw.transform.P * pEC;
        }
    </script>

    <script id="fs" type="x-shader/x-fragment">
        #version 300 es
        precision highp float;
        precision highp int;
        
        layout(std140, column_major) uniform;

        struct Material
        {
            vec3 ambient;
            vec3 diffuse;
            vec3 specular;
            float shininess;
        };

        struct Light
        {
            vec3 position; // Camera space
        };

        uniform PerScene
        {
            Material material;
        } u_perScene;

        uniform PerPass
        {
            Light light;
        } u_perPass;

        
        in vec3 v_normal;
        in vec3 v_view;
        in vec4 v_color;

        out vec4 color;

        void main()
        {
            vec3 n = normalize(v_normal);
            vec3 l = normalize(u_perPass.light.position + v_view);
            vec3 v = normalize(v_view);

            vec3 diffuse = max(dot(n, l), 0.0) * u_perScene.material.diffuse;
            vec3 r = - reflect(l, n);
            vec3 specular = pow(max(dot(r, v), 0.0), u_perScene.material.shininess) * u_perScene.material.specular;

            color = vec4(u_perScene.material.ambient + diffuse + specular, 1.0);
        }
    </script>

    <script type="module" src="./buffer_uniform.ts">
     </script>
</body>
</html>